<!-- 「团队邀请赛」页面 -->
<template>
  <div class="page">
    <div class="container">
      <!-- 背景 -->
      <div class="bg">
        <image
          class="bg-img"
          src="https://ustatic.hudongmiao.com/miao/web/fse.png"
          mode="aspectFit"
        />
        <div class="bg-content">
          <image
            class="tit"
            src="https://ustatic.hudongmiao.com/miao/web/fsdg.png"
            mode="aspectFit"
          />
          <div class="time">活动时间：2024年9月27日-2024年10月31日</div>
        </div>
      </div>
      <!-- 规则按钮 -->
      <div class="rule-btn" @click="openRulesPopup">规则</div>
      <!-- 奖励按钮 -->
      <div class="reward-btn" @click="openRewardPopup">奖励</div>
      <DanmuArea
        class="danmu-area"
        :danmu-list="teamInviteCompetitionRankListBroadcastContent"
      />
      <div class="my-ranking">
        <!-- 有团队的情况 -->
        <div class="my-ranking_content" v-if="teamInviteCompetition">
          <div class="rank_top">
            <div class="left-block">
              <image
                class="avatar-img"
                :src="
                  teamInviteCompetition?.teamAvatar || IMG_URL.NO_TEAM_AVATAR
                "
                mode="aspectFill"
              />
              <div class="text-info">
                <div class="text_top">
                  <div class="team-name">
                    {{ teamInviteCompetition?.teamName }}
                  </div>
                  <div class="total-point">
                    总积分：{{ teamInviteCompetition?.score || 0 }}
                  </div>
                </div>
                <div class="text_bottom">
                  <AuthBox :hasAuth="teamInviteCompetition?.auth_status === '1'" class="team-auth-box" />
                  <div class="distance">
                    距离上一名还差：
                    <text class="num">
                      {{ teamInviteCompetition?.distance || 0 }}积分
                    </text>
                  </div>
                </div>
              </div>
            </div>
            <div class="rank">
              {{ teamInviteCompetition?.rank || 999 }}
            </div>
          </div>
          <div class="use-tip_box">使用嗨喵APP更容易增长积分哦</div>
        </div>
        <!-- 无团队的情况 -->
        <div class="my-ranking_content no-team" v-else>
          <div class="rank_top">
            <image
              class="avatar-img"
              :src="IMG_URL.NO_TEAM_AVATAR"
              mode="aspectFill"
            />
            <div class="create-team-btn" @click="openCreateTeamPopup">
              <image
                class="create-team-btn-icon"
                src="@/static/icons/common/plus-white.svg"
                mode="aspectFit"
              />
              创建团队
            </div>
          </div>
          <div class="use-tip_box">使用嗨喵APP更容易增长积分哦</div>
        </div>
      </div>

      <!-- 当前排行榜 -->
      <div class="current-ranking">
        <!-- 标题 -->
        <div class="title">
          <image
            class="title-img"
            src="https://ustatic.hudongmiao.com/miao/activity/rank-tite.png"
            mode="aspectFit"
          />
        </div>
        <!-- 更新说明 -->
        <div class="update-tips">
          {{ updateTips }}
        </div>
        <!-- 排行榜列表 -->
        <div class="rank-table">
          <!-- 表头 -->
          <div class="rank-header">
            <text class="rank"> 名次 </text>
            <text class="nickname"> 昵称 </text>
            <text class="reward"> 奖励 </text>
          </div>
          <!-- 表格内容 -->
          <div class="rank-body">
            <!-- 为空时显示的内容 -->
            <div
              v-if="teamInviteCompetitionRankList.length === 0"
              class="empty"
            >
              <div class="empty-text">
                <p>暂无排名</p>
                <p><span class="red">万元现金红包</span>等大奖等你来拿</p>
              </div>
              <div class="empty-img">
                <image src="https://ustatic.hudongmiao.com/miao/web/yiwantow.png" class="empty-img-item"/>
                <image src="https://ustatic.hudongmiao.com/miao/activity/baqian.png" class="empty-img-item"/>
                <image src="https://ustatic.hudongmiao.com/miao/activity/liuqian.png" class="empty-img-item"/>
              </div>
            </div>
            <!-- 排名项 -->
            <div
              v-for="(item, index) in teamInviteCompetitionRankList"
              :key="index"
              class="rank-item"
              :class="index <= 4 ? 'rank-item--top' : ''"
            >
              <!-- 名次 -->
              <div class="rank">
                <image
                  v-if="index <= 2"
                  class="rank-img"
                  :src="rankBorder(index + 1)"
                />
                <text v-else class="rank-num">
                  {{ index + 1 }}
                </text>
                <!-- 头像 -->
                <div class="avatar">
                  <image
                    class="avatar-img"
                    :src="item.avatar"
                    mode="aspectFill"
                  />
                </div>
              </div>
              <!-- 昵称 -->
              <div class="nickname">
                <div class="nickname-item">{{ item.nickname }}</div>
                <AuthBox :hasAuth="item?.auth_status === '1'" :onlyShow="true"/>
              </div>
              <!-- 奖励 -->
              <div class="reward">
                <div
                  v-for="(reward, rewardIndex) in item.rewardList"
                  :key="rewardIndex"
                  class="reward-item"
                  :class="reward.icon ? '' : 'reward-item--only-title'"
                >
                  <image
                    v-if="reward.icon"
                    class="reward-item-icon"
                    :src="reward.icon"
                    mode="aspectFill"
                  />
                  <div
                    class="reward-item-title"
                    :class="reward.title.length > 12 ? 'to-long' : ''"
                  >
                    {{ reward.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ToLoginMask v-if="!isLogin" />
    </div>
  </div>
  <CustomTabBar />
  <CreateTeamPopup ref="createTeamPopup" @confirm="onCreateTeamConfirm" />
  <RulesPopup
    ref="rulesPopup"
    :rule-key="ACTIVITY_RULE_KEY.ACTIVITY_202405"
    :title-img="IMG_URL.RULE_TITLE"
  />
  <TeamCompetitionRewardsPopup ref="teamCompetitionRewardsPopup" />
</template>

<script lang="ts" setup>
import RulesPopup from "@/components/activity-202405/RulesPopup.vue";
import TeamCompetitionRewardsPopup from "@/components/activity-202405/TeamCompetitionRewardsPopup.vue";
import AuthBox from "@/components/activity-202410/AuthBox.vue";
import CreateTeamPopup from "@/components/CreateTeamPopup.vue";
import CustomTabBar from "@/components/CustomTabBar.vue";
import DanmuArea from "@/components/DanmuArea.vue";
import ToLoginMask from "@/components/ToLoginMask.vue";
import {
  IMG_URL,
  TEAM_COMPETITION_END_TIME,
} from "@/static/constant/activity-202405-constant";
import { ACTIVITY_RULE_KEY } from "@/static/constant/view-constant";
import { useActivity202310 } from "@/stores/activity-202310-store";
import { useUser } from "@/stores/user";
import { onCreateTeamConfirm } from "@/utils/activity-202310-utils";
import dayjs from "dayjs";

const userStore = useUser();
const { isLogin } = storeToRefs(userStore);

const activity202310Store = useActivity202310();
const { setTeamInviteCompetitionData, setRankListBroadcastContent } =
  activity202310Store;
const {
  teamInviteCompetition,
  teamInviteCompetitionRankList,
  teamInviteCompetitionRankListBroadcastContent,
} = storeToRefs(activity202310Store);

/** 检查并获取数据 */
const checkAndGetInfo = () => {
  setTeamInviteCompetitionData();
  if (teamInviteCompetitionRankListBroadcastContent.value.length === 0) {
    setRankListBroadcastContent();
  }
};

onShow(checkAndGetInfo);

// 排行榜图标
const rankBorder = (rank: number) =>
  `https://ustatic.hudongmiao.com/joymew-host-contest/activity-202405/no-${rank}.png`;

const currentInstance = getCurrentInstance();

const updateTips = computed(() => {
  const endTime = dayjs(TEAM_COMPETITION_END_TIME);
  const now = dayjs();
  const diff = endTime.diff(now);
  if (diff >= 0) {
    return "（每日24点更新排名）";
  }

  return "活动已结束   积分排名如下";
});


// #region 弹窗相关
const openRulesPopup = () => {
  (currentInstance?.refs.rulesPopup as InstanceType<typeof RulesPopup>).open();
};

const openRewardPopup = () => {
  (
    currentInstance?.refs.teamCompetitionRewardsPopup as InstanceType<
      typeof TeamCompetitionRewardsPopup
    >
  ).open();
};

// #endregion

// #region 创建团队相关

/** 打开创建团队弹窗 */
const openCreateTeamPopup = () => {
  (currentInstance?.refs.createTeamPopup as typeof CreateTeamPopup).open();
};

// #endregion
</script>

<style lang="scss" scoped>
.page {
  position: relative;

  width: 100vw;
  height: calc(100vh - env(safe-area-inset-bottom) - $tabBarHeight);
  overflow-x: hidden;
  overflow-y: scroll;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  .container {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    min-height: 100%;

    display: grid;
    grid-template:
      "." 60.8vw
      "danmu-area" 120px
      "." 27px
      "my-ranking" auto
      "." 3.0769vw
      "current-ranking" auto
      "." 12.8205vw
      /1fr;
    justify-items: center;

    // 背景
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1000;

      width: 100vw;
      height: 100%;

      background: #fbede5;

      .bg-img {
        position: absolute;
        top: -89rpx;
        left: 0;

        width: 100vw;
        height: 143vw;
      }
      .bg-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 165rpx;
        .tit {
          width: 623rpx;
          height: 196rpx;
        }
        .time {
          margin-top: 15rpx;
          font-size: 19rpx;
          font-weight: 400;
          color: #ff403c;
        }
      }
    }

    .danmu-area {
      grid-area: danmu-area;
    }

    // 规则按钮和奖励按钮
    .rule-btn,
    .reward-btn {
      position: absolute;
      right: 12px;

      width: 30px;
      height: 30px;

      background: rgba($color: #000, $alpha: 60%);
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 11px;
      color: #fff;
    }

    // 规则按钮
    .rule-btn {
      top: 150px;
    }

    // 奖励按钮
    .reward-btn {
      top: 189px;
    }

    // 广播区域
    .broadcast-area {
      grid-area: broadcast-area;

      width: 222px;
      height: 32px;
      overflow: hidden;

      background: rgba($color: #000, $alpha: 40%);
      border-radius: 32px;

      display: flex;
      flex-direction: column;
      align-items: center;

      .broadcast-wrapper {
        animation: broadcast-wrapper 10s ease-in-out infinite;

        @keyframes broadcast-wrapper {
          0% {
            transform: translateY(0);
          }

          5% {
            transform: translateY(-32px);
          }

          33% {
            transform: translateY(-32px);
          }

          38% {
            transform: translateY(-64px);
          }

          66% {
            transform: translateY(-64px);
          }

          71% {
            transform: translateY(-96px);
          }

          100% {
            transform: translateY(-96px);
          }
        }

        .broadcast-item {
          width: 222px;
          height: 32px;

          padding: 2px;
          display: grid;
          grid-template:
            "avatar name text" 1fr
            / 32px 1fr max-content;
          column-gap: 4px;
          align-items: center;

          .broadcast-item-avatar {
            grid-area: avatar;

            width: 28px;
            height: 28px;

            border-radius: 50%;
          }

          .broadcast-item-name {
            grid-area: name;

            width: 100%;
            height: 13px;
            overflow: hidden;

            font-size: 13px;
            line-height: 13px;
            color: #fff;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .broadcast-item-text {
            grid-area: text;

            font-size: 13px;
            color: #fff;

            .red {
              color: #ff2459;
            }
          }
        }
      }
    }

    // 我的排名
    // .my-ranking {
    //   grid-area: my-ranking;

    //   position: relative;

    //   width: 91.7949vw;

    //   border-radius: 4px;
    //   box-shadow: 0 0 0.5128vw 0 #fff inset;

    //   padding: 12px 16px;
    //   display: grid;
    //   grid-template:
    //     " avatar nickname total-turnover .  ranking" 25px
    //     " avatar team-auth-box distance distance ranking" 25px
    //     " . . . . ." 5px
    //     " tips tips tips tips tips" 27px
    //     / min-content max-content max-content 1fr 12vw;
    //   gap: 2px 5px;
    //   align-items: center;

    //   &.no-team {
    //     grid-template:
    //       "avatar create-team-btn" 50px
    //       "tips tips" 27px
    //       / min-content 1fr;
    //     gap: 5px;

    //     .create-team-btn {
    //       grid-area: create-team-btn;
    //       justify-self: center;

    //       width: 100%;
    //       height: 36px;

    //       background: $button-bg;
    //       border-radius: 41px;

    //       display: flex;
    //       align-items: center;
    //       justify-content: center;

    //       font-size: 14px;
    //       color: #fff;

    //       .create-team-btn-icon {
    //         margin-right: 8px;

    //         width: 14px;
    //         height: 14px;
    //       }
    //     }
    //   }

    //   // 背景
    //   .bg {
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    //     z-index: -1000;

    //     width: 100%;
    //     height: 100%;
    //   }

    //   // 头像
    //   .avatar {
    //     grid-area: avatar;

    //     width: 48px;
    //     height: 48px;
    //     overflow: hidden;

    //     border: 1px solid #f1eacf;
    //     border-radius: 50%;

    //     .avatar-img {
    //       width: 100%;
    //       height: 100%;
    //     }
    //   }

    //   // 昵称
    //   .nickname {
    //     grid-area: nickname;
    //     align-self: end;

    //     max-width: 35vw;
    //     height: 100%;
    //     overflow: hidden;

    //     font-size: 17px;
    //     color: #333;
    //     text-align: end;
    //     text-overflow: ellipsis;
    //     text-wrap: nowrap;
    //     white-space: nowrap;
    //   }

    //   // 总流水
    //   .total-turnover {
    //     grid-area: total-turnover;
    //     align-self: flex-end;

    //     font-size: 13px;
    //     color: rgb(0 0 0 / 40%);
    //   }
    //   // 团队认证状态
    //   .team-auth-box {
    //     grid-area: team-auth-box;
    //   }
    //   // 差距
    //   .distance {
    //     grid-area: distance;
    //     align-self: flex-start;

    //     font-size: 28rpx;
    //     color: #333;

    //     .num {
    //       color: #ff2459;
    //     }
    //   }

    //   // 排名
    //   .ranking {
    //     grid-area: ranking;

    //     width: 50px;

    //     font-size: 7.1795vw;
    //     font-weight: 700;
    //     text-align: center;
    //   }

    //   // 提示
    //   .tips {
    //     grid-area: tips;
    //     justify-self: center;

    //     width: 100%;
    //     height: 27px;

    //     background: #ffcbd2;
    //     border-radius: 4px;

    //     display: flex;
    //     align-items: center;
    //     justify-content: center;

    //     font-size: 13px;
    //     color: #ff403c;
    //   }
    // }
    .my-ranking {
      width: 712rpx;
      grid-area: my-ranking;
      position: relative;
      background-size: 100% 100%;
      background-image: url("https://ustatic.hudongmiao.com/joymew-host-contest/common-rank-bg.png");
      .my-ranking_content {
        padding: 35rpx 42rpx 21rpx 19rpx;
        .rank_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left-block {
            display: flex;
            align-items: center;
            .avatar-img {
              width: 96rpx;
              height: 96rpx;
              border-radius: 50%;
              margin-right: 11rpx;
            }
            .text-info {
              .text_top {
                margin-bottom: 15rpx;
                display: flex;
                align-items: flex-end;
                .team-name {
                  font-size: 33rpx;
                  color: #333;
                  max-width: 200rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .total-point {
                  font-size: 25rpx;
                  color: rgba(0, 0, 0, 0.4);
                  margin-left: 10rpx;
                }
              }

              .text_bottom {
                display: flex;
                align-items: center;
                .distance {
                  margin-left: 13rpx;
                  font-size: 29rpx;
                  color: #333;
                  .num {
                    color: #ff2459;
                  }
                }
              }
            }
          }
          .rank {
            font-size: 54rpx;
            font-weight: 400;
            color: #333;
          }
        }
        .use-tip_box {
          width: 627rpx;
          height: 52rpx;
          background: #ffcbd2;
          border-radius: 8rpx;
          text-align: center;
          line-height: 52rpx;
          font-size: 25rpx;
          color: #ff403c;
          font-weight: 400;
          margin: 0 auto;
          margin-top: 21rpx;
        }
        &.no-team {
          .rank_top {
            .avatar-img {
              width: 96rpx;
              height: 96rpx;
              border-radius: 50%;
              margin-right: 11rpx;
            }
            .create-team-btn {
              width: 520rpx;
              height: 73rpx;

              background: $button-bg;
              border-radius: 41px;

              display: flex;
              align-items: center;
              justify-content: center;

              font-size: 14px;
              color: #fff;

              .create-team-btn-icon {
                margin-right: 8px;

                width: 14px;
                height: 14px;
              }
            }
          }
        }
      }
    }

    // 当前排名
    .current-ranking {
      grid-area: current-ranking;

      width: 91.7949vw;

      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 2px 0 #fff inset;

      display: grid;
      grid-template:
        "." 17px
        "title" 6.4103vw
        "." 13px
        "update-tips" 3.8462vw
        "." 18px
        "rank-table" auto;
      justify-items: center;

      // 标题
      .title {
        grid-area: title;

        width: 100%;

        .title-img {
          width: 100%;
          height: 100%;
        }
      }

      // 更新提示
      .update-tips {
        grid-area: update-tips;

        font-size: 13px;
        color: #333;
      }

      // 排行榜
      .rank-table {
        grid-area: rank-table;

        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        // 表头
        .rank-header {
          width: 100%;
          height: 6.9231vw;

          background: #FFE8E1;

          padding: 0 16px;
          display: grid;
          grid-template:
            "rank nickname reward" 1fr
            / 64px 1fr 34vw;
          column-gap: 12px;
          align-items: center;

          font-size: 13px;
          color: rgba($color: #000, $alpha: 40%); // 排名

          .rank {
            grid-area: rank;
            justify-self: center;
          }

          // 昵称
          .nickname {
            grid-area: nickname;
            margin-left: 12px;
          }

          // 奖励
          .reward {
            grid-area: reward;
            justify-self: center;
          }
        }

        // 表格内容
        .rank-body {
          width: 100%;

          background: #fff;

          padding-bottom: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .empty {
            margin: 28px 0 126px;

            width: calc(100% - 64px);
            height: 41.3333vw;

            display: flex;
            flex-direction: column;
            align-items: center;

            .empty-text {
              font-style: 19px;
              font-weight: bold;
              color: #FF403C;
              text-align: center;

              .red {
                color: #6147FF;
              }
            }
            .empty-img {
              display: flex;
              column-gap: 44rpx;
              margin-top: 15rpx;
              .empty-img-item {
                width: 160rpx;
                height: 160rpx;
              }
            }
          }

          // 排名项
          .rank-item {
            margin-top: 14px;

            width: 100%;

            padding: 0 16px;
            display: grid;
            grid-template:
              "rank nickname reward" 1fr
              / 64px 1fr 34vw;
            column-gap: 12px;
            align-items: center;

            // 名次
            .rank {
              grid-area: rank;
              justify-self: center;

              position: relative;

              width: 64px;
              height: 64px;

              // 图片形式的名次
              .rank-img {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;

                width: 100%;
                height: 100%;
              }

              // 文字形式的名次
              .rank-num {
                position: absolute;
                bottom: 4px;
                left: 50%;
                z-index: 1;

                width: 16px;
                height: 16px;

                background: #f1eacf;
                border: 1px solid #f1d465;
                border-radius: 50%;
                box-shadow: 0 0 2px 0 rgb(0 0 0 / 25%) inset;

                transform: translateX(-50%);

                display: flex;
                align-items: center;
                justify-content: center;

                font-size: 11px;
                color: #a88500;
              }

              // 头像
              .avatar {
                position: absolute;
                top: 50%;
                left: 50%;

                width: 42px;
                height: 42px;
                overflow: hidden;

                border: 1px solid #f1eacf;
                border-radius: 50%;

                transform: translate(-50%, -50%);

                .avatar-img {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            // 昵称
            .nickname {
              grid-area: nickname;

              width: 190rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              .nickname-item {
                margin-bottom: 21rpx;
                width: 100%;
                overflow: hidden;

                font-size: 17px;
                color: #333;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            // 奖励
            .reward {
              grid-area: reward;
              justify-self: center;

              width: 100%;

              display: flex;
              flex-direction: column;
              row-gap: 7px;

              .reward-item {
                display: grid;
                grid-template:
                  "icon title" 1fr
                  / 16px 1fr;
                column-gap: 3px;

                .reward-item-icon {
                  grid-area: icon;
                  justify-self: center;

                  width: 14px;
                  height: 14px;
                }

                .reward-item-title {
                  grid-area: title;

                  font-size: $rank-prize-font-size;
                  color: #ff2459;

                  &.to-long {
                    font-size: $rank-prize-font-size--long;
                  }
                }

                &--only-title {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }

            &--top {
              .reward {
                .reward-item {
                  grid-template:
                    "icon title" 1fr
                    / 25px 1fr;
                  column-gap: 3px;

                  &:nth-child(1) {
                    .reward-item-icon {
                      width: 25px;
                      height: 25px;
                    }

                    .reward-item-title {
                      font-size: $rank-prize-font-size--top;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
